<template>
    <div style="background-color:#f6f5f5;width: 100%;height: 100%">
    <div>
        <div class="db" >
            <div class="yhnc" v-if="user.nickname">{{ user.nickname }}</div>
            <div class="yhnc" v-else>请登录！</div>
            <img
                    width="100"
                    height="100"
                    v-if="user.avatar" :src="'http://192.168.40.177:8008/api/file/'+user.avatar"

                    v-else src="https://wx2.sinaimg.cn/mw690/005QiJkMgy1hsjri5hpz4j30u00u075j.jpg"
                    style="margin-top: 40px"
            />

            <van-icon
                    name="setting-o"
                    color="#ffff"
                    size="25px"
                    style="display: flex;top: -140px;right: -320px"
            />
            <div  class="db2">
            <UserAccountInfo :num="user.nowMoney" :text="'余额'"></UserAccountInfo>
            <UserAccountInfo :num="user.couponCount" :text="'优惠卷'"></UserAccountInfo>
            <UserAccountInfo :num="user.payCount" :text="'购买数'"></UserAccountInfo>
            <UserAccountInfo :num="user.integral" :text="'积分'"></UserAccountInfo>
                </div>
        </div>

    <van-grid class="gg" :column-num="5" :border="false">
        <van-grid-item icon="shop-o" text="未支付"  />
        <van-grid-item icon="logistics" text="待发货" />
        <van-grid-item icon="bag-o" text="待收货" />
        <van-grid-item icon="shopping-cart-o" text="待评价" />
        <van-grid-item icon="shopping-cart-o" text="待评价" />
    </van-grid>

    <van-cell-group class="wg" :border="false">
        <van-cell  icon="location-o"title="地址管理" />
        <van-cell  icon="gold-coin-o"title="我的钱包"  />
        <van-cell  icon="bag-o"title="我的收藏" />
        <van-cell  icon="clock-o"title="我的足迹"  />
        <van-cell  icon="setting-o " title="修改密码"  @click="tzrpwd"/>
    </van-cell-group>
        <button class="an">退出登录</button>
    </div>
   <TabBar></TabBar>
    </div>
</template>

<script>
    import TabBar from "@/components/TabBar";
    import UserAccountInfo from "@/components/UserAccountInfo";
    import { Icon } from 'vant';
    import axios from 'axios'
    import  {Notify} from 'vant'
    import { person } from "@/api/person";
    export default {
        data() {
            return {
            user:{}
            };
        },
        methods:{
            tzrpwd(){
                this.$router.push('/rpwd')
            }
        },
        created() {
            // const count = this.$store.state.count
            //
            // const a = this.$store.state.a
            //
            // console.log(count)
            //
            // console.log(a)
            //
            // this.$store.dispatch("setCount",2)

            let token = this.$store.state.token || this.$cookies.get("token")


            person( token ).then (res => {




                //如果有响应结果
                if(res){

                    const  data = res.data
                    const da = data.data
                    this.$data.user = da

                }
            })

        },
        components: {
            UserAccountInfo
        }
    }
</script>

<style>
    .yhnc{
        position: absolute;
        left: 130px;
        top: 100px;
    }
    html,body,#app{
        height: 100%;
    }
    .db2{
        display: flex;
        justify-content: space-between;
        width: 86%;
        background-color: rgba(50, 50, 51, 0.8);
        color: white;
        height: 60px;
        align-items: center;
        margin-top: -10px;
        margin-left: 14px;
        text-align: center;
        border-radius: 3%;
        padding: 0px 20px;
        line-height: 25px;
    }
    .van-cell {
        font-size: 16px !important;
        width: 100% !important;
        /* margin: 5px; */
        padding: 18px !important;
        border-radius: 10px;
    }
    .gg{
        margin-top: 25px;
        padding: 0px 20px;
        border: none !important;
        line-height: 10px !important;
        width: 90%;

    }
    .db{
        height: 200px;
        width: 93%;
        background-color: #ff6034;
        padding: 0.4rem;
        border-bottom-right-radius: 16%;
        border-bottom-left-radius: 16%;
        position: relative;

    }
    .an{
        width: 90%;
        height: 40px;
        color: #ffffff;
        background-color: #ff6034;
        border: none;
        margin-left: 18px;
        margin-top: 15px;

    }
    .wg {
        border: 1px solid #ffffff;
        width: 90%;
        margin-left: 18px;
        margin-top: 15px;

    }
    .van-grid-item__content {
        height: 100%;
        padding: 0px 5px !important;
    }
    .van-grid-item__content i{
        height: 15px;
        font-size: 25px !important;
    }
    .van-grid-item__text {
        color: #646566;
        font-size: 10px !important;

    }




</style>